<template>
	<view class="qiun-columns">
		<view class="card-box"></view>
		<view class="card">
			<view class="user-msg">
				<image :src="$util.img(user_msg.headimg)" v-if="user_msg.headimg!=''" class="head-img" mode=""></image>
				<image src="../../../static/default_headimg.png" v-if="user_msg.headimg==''" class="head-img" mode=""></image>
				<view class="msg-box">
					<view class="name-msg">{{user_msg.name}}</view>
					<view class="lv-box" v-if="user_msg.level!=0">
						<text>当前级别:</text>
						<image v-for="item in user_msg.level" :key="item" src="../../../static/star2.png" mode="aspectFit"></image>
						<text>S{{user_msg.level}}</text>
					</view>
					<view class="lv-box" v-if="user_msg.level==0">
						<text>当前不是会员，暂无星级</text>
					</view>
				</view>
			</view>
			<view class="num-box">
				<view class="num-item">
					<text>余额</text>
					<text>{{user_msg.yue}}</text>
				</view>
				<view class="num-item">
					<text>积分</text>
					<text>{{user_msg.jifen}}</text>
				</view>
				<view class="num-item">
					<text>红积分</text>
					<text>{{user_msg.hongjifen}}</text>
				</view>
			</view>
		</view>
		<view class="top-up-title">
			会员充值
		</view>
		<scroll-view scroll-x="true" class="lv-list">
			<!--  -->
			<view class="list-item" v-for="(item,index) in AllList" :ksy="index" :class="is_tallest == 0 && index == 0?'active':''">
				<view class="abs-box" v-if="is_tallest == 0 && index == 0">
					未购买
				</view>
				<view class="abs-box box-color" v-else>
					已购买
				</view>
				<view class="item-title">升级{{item.card_name}}</view>
				<view class="item-money">￥<text class="item-money-num">{{item.card_price}}</text></view>
				<view class="item-order" v-if="is_tallest == 0 && index == 0">未购买</view>
				<view class="item-order" v-else>订单号:{{item.member_card_no}}</view>
			</view>
		</scroll-view>
		<button type="default" class="pay-btn" @click="pay_level()">
			<image src="../../../static/lv.png" mode="aspectFit"></image><text>购买权益卡</text>
		</button>
		
		<view class="kf-contact" v-if="agreementConfirmContent.kf_mobile.length > 0">索要发票请联系客服：{{agreementConfirmContent.kf_mobile}}</view>
		
		<view class="qiun-charts">
			<view class="echarts-title">
				当前进度
			</view>
			<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
		</view>
		<view class="echarts-footer">
			<text>继续升级会员</text>
			<view class="see-btn" @click="pay_level()">
				查看详情
			</view>
		</view>
		
		<uni-popup ref="level_popup" type="bottom" class="level-floating">
			<view class="title">
				权益卡积分说明
			</view>
			<view class="level-detail">
				<rich-text :nodes="agreement"></rich-text>
			</view>
			<view class="btn-group">
				<button type="default" @click="level_popup_close()">取消</button>
				<button class="sue-btn" type="default" v-if="is_tallest == 0" @click="up_password()">￥{{pay_money}}<text>去支付</text></button>
				<button class="sue-btn" type="default" v-else @click="level_popup_close()"><text>确定</text></button>
			</view>
		</uni-popup>
		<uni-popup ref="agreement" type="center" class="agreement" :maskClick="!1">
			<view class="agreement-box">
				<view class="top-box">
					<view class="img-box">
						<image :src="$util.img('upload/uniapp/member/card/1.png')" mode="widthFix"></image>
					</view>
					<view class="text-box">
						<text>开心购物</text>
						<text>快乐经营</text>
					</view>
					<view class="img-box-container">
						<view class="img-box img-2">
							<image :src="$util.img('upload/uniapp/member/card/2.jpg')" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="footer-box">
					<view class="text-box" v-if="agreementConfirmContent.links.length > 0">
						加入即表明您同意
						<template v-for="(item, index) in agreementConfirmContent.links" >
							<text @click="redirectToLink(item.wap_url)">《{{item.title}}》</text>
							{{(agreementConfirmContent.links.length > 1 && index !== (agreementConfirmContent.links.length - 1)) ? '和' : '' }}
						</template>
					</view>
					
					<button type="default" @click="agreementConfirm()">免费加盟</button>
				</view>
			</view>
		</uni-popup>
		<jpKeyboard ref="jpKeyboard1" keyType="two" @inputPwd="Getpassword" @backspace="del_password"></jpKeyboard>
	</view>
	
</template>

<script>
	import jpKeyboard from '@/components/jp-keyboard/jp-keyboard.vue';
	import uCharts from '@/components/u-charts/u-charts.js';
	import htmlParser from '@/common/js/html-parser';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		isJSON
	} from '@/common/js/checker.js';
	import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
	var _self;
	var canvaGauge = null;

	export default {
		components: {
			jpKeyboard,
			uniPopup,
			nsNavbar
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				gaugeWidth: 15,
				type: 'default',
				user_msg: {
					headimg: '',
					name: '',
					level: '',
					yue: '',
					jifen: '',
					hongjifen: ''
				},
				show_progress: 0, //当前进度
				AllList: [], //所有的充值信息
				showList: [], //已购买列表
				showList_num: 0, //展示的个数
				pay_money: 0, //购买下一级的钱
				pay_card_id: 0, //购买下一级的ID
				agreement: '', //购买协议
				is_tallest: 0, //是否最高等级
				agreementsTitle:'',
				agreements:'协议内容',
				agree:true,
				agreementConfirmContent: {
					links: [],
					kf_mobile: ''
				}
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			if (uni.getStorageSync('token')) {
				this.getMemberInfo()
				this.getlevelByList()
				this.getagreement()
				this.getAgreementConfirm();
			} else {
				this.$util.redirectTo('/pages/member/index/index');
			}

		},
		mounted() {
			if(!uni.getStorageSync('is_agreement')){
				uni.setStorage({
					key:'is_agreement',
					data:2
				})
			}
			/* if(uni.getStorageSync('is_agreement') == 2 ){
				this.$refs.agreement.open()
			} */
			this.$refs.agreement.open();
			this.agreeMent()
		},
		
		
		methods: {
			redirectToLink(url) {
				this.$util.redirectTo(url);
			},
			// 获取买过的
			getlevelByList() {
				this.$api.sendRequest({
					url: '/membercard/api/card/lists',
					data: {
						token: uni.getStorageSync('token')
					},
					success: res => {
						console.log(res)
						if (res.code == 0) {
							this.showList_num = res.data.length
							this.showList = res.data
							this.getlevelAllList()
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				});
			},
			// 获取现在所有的
			getlevelAllList() {
				this.$api.sendRequest({
					url: '/membercard/api/card/typeList',
					success: res => {
						if (res.code == 0) {


							let newArray = this.showList
							//如果卡的类型 多于 用户已经购买的卡数量则用户还可以购买
							if (res.data.length > this.showList_num) {
								let Alllevel = res.data.slice(0, this.showList_num + 1)
								newArray.unshift(Alllevel[Alllevel.length - 1])
							} else {
								//是最高等级
								this.is_tallest = 1;
							}
							this.AllList = newArray
							this.pay_money = parseInt(this.AllList[0].card_price)
							this.pay_card_id = this.AllList[0].card_id
							if (this.AllList.length == 1) {
								this.show_progress = 0
								this.getServerData(); //启动图表
							} else {
								let num1 = parseFloat(res.data.length)
								let num2 = parseInt(this.AllList.length) - 1
								console.log(num1)
								console.log(num2)
								this.show_progress = num2 / num1
								this.getServerData(); //启动图表
							}
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				});
			},
			// 获取协议
			getagreement() {
				this.$api.sendRequest({
					url: '/membercard/api/card/agreement',
					success: res => {
						console.log(res)
						if (res.code == 0) {
							this.agreement = htmlParser(res.data.value.content)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				});
			},
			// 协议确认
			getAgreementConfirm() {
				this.$api.sendRequest({
					url: '/membercard/api/config/agreementConfirm',
					success: res => {
						if (res.code >= 0) {
							this.agreementConfirmContent.kf_mobile = res.data.value.kf_mobile;
							this.agreementConfirmContent.links = JSON.parse(res.data.value.links);
							console.log(1111, res);
						}
					}
				});
			},
			agreementConfirm(){
				this.$refs.agreement.close()
			},
			// 购买会员
			pay_level() {
				this.$refs.level_popup.open()
			},
			level_popup_close() {
				this.$refs.level_popup.close()
			},
			up_password() {
				this.$refs.jpKeyboard1.toOpen()
			},
			// 输入密码完成，
			Getpassword(e) {
				this.password = e
				this.$refs.level_popup.close()
				this.sue_submit()
			},

			del_password() {},
			// 提交
			sue_submit() {
				this.$api.sendRequest({
					url: '/membercard/api/Order/create',
					data: {
						token: uni.getStorageSync('token'),
						card_id: this.pay_card_id,
						pay_password: this.password,
						order_from: 'h5',
						order_from_name: 'H5'
					},
					success: res => {
						if (res.code == 0) {
							console.log(res)
							// this.user_msg.headimg = res.data.headimg
							// this.user_msg.name = res.data.show_name
							// this.user_msg.level = res.data.card_level
							// this.user_msg.yue = res.data.balance
							// this.user_msg.jifen = res.data.point
							// this.user_msg.hongjifen = res.data.red_point
							uni.showToast({
								title: ' 恭喜您，升级完成 ',
								icon: 'none', //必须要succss吗  一卡死  没有icon  必须要加这个  只要不需要  none直接不显示文字吗  样子没有对号  会不会太丑了

							})
							setTimeout(() => {
								this.getMemberInfo()
								this.getlevelByList()
								this.getagreement()
							}, 1000)
						} else {
							if (res.error_code == 'PAY_PASSWORD_NOT_SET') {
								uni.showModal({
									title: '支付密码未设置',
									content: '是否要去设置',
									success: (res) => {
										if (res.confirm) {
											this.$util.redirectTo('/otherpages/member/pay_password/pay_password', {
												back: '/otherpages/member/level/newlevel'
											});
										}
									}
								}); 
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						}
					}
				});
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0) {
							console.log(res)
							this.user_msg.headimg = res.data.headimg
							this.user_msg.name = res.data.show_name
							this.user_msg.level = res.data.card_level
							this.user_msg.yue = res.data.balance
							this.user_msg.jifen = res.data.point
							this.user_msg.hongjifen = res.data.red_point
						}
					}
				});
			},
			getServerData() {
				let Gauge = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Gauge.categories = [{
							"value": 0.2,
							"color": "#34C25D"
						}, {
							"value": 0.5,
							"color": "#1791FD"
						},
						{
							"value": 0.8,
							"color": "#F77735"
						}, {
							"value": 1,
							"color": "#F94460"
						}
					],

					Gauge.series = [{
						"name": "升级进度",
						"data": this.show_progress
					}];
				_self.textarea = [{
					"value": 0.2,
					"color": "#1890ff"
				}, {
					"value": 0.8,
					"color": "#2fc25b"
				}, {
					"value": 1,
					"color": "#f04864"
				}]
				_self.showGauge("canvasGauge", Gauge);
			},
			showGauge(canvasId, chartData) {
				canvaGauge = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'gauge',
					fontSize: 11,
					legend: {
						show: false
					},
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%',
						color: chartData.categories[1].color,
						fontSize: 25 * _self.pixelRatio,
						offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
					},
					extra: {
						gauge: {
							type: 'default',
							width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							splitLine: {
								fixRadius: 0,
								splitNumber: 10,
								width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
								color: '#FFFFFF',
								childNumber: 5,
								childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio, //仪表盘背景的宽度
							},
							pointer: {
								width: _self.gaugeWidth * 0.8 * _self.pixelRatio, //指针宽度
								color: 'auto'
							}
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
				});
			},
			// 
			agreeMent(){
				this.$api.sendRequest({
					url: '/membercard/api/card/agreement',
					success: res => {
						if(res.code == 0){
							this.agreementsTitle=res.data.value.title
							this.agreements = res.data.value.content
						}
					}
				});
			}
			,btn1(){
				this.$refs.agreement.close()
				setTimeout(() => {
					this.$util.goBack();
				}, 300)
			},
			btn2(){
				this.$refs.agreement.close()
				uni.setStorage({
				    key: 'is_agreement',
				    data: 1
				});
			},	
		
		}
	}
</script>

<style lang="scss">
	.qiun-columns {
		height: 100vh;
		background-color: #F2F2F2;

		.card-box {
			background-color: #3F3F3F;
			width: 100%;
			border-bottom-right-radius: 110rpx;
			border-bottom-left-radius: 110rpx;
			height: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.card {
			position: absolute;
			top: 130rpx;
			background-image: url(../../../static/level_bgi.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			// background-image: linear-gradient(to right, #242A42, #474F64);
			box-shadow: 0rpx 15rpx 20rpx rgba(#000000, .3);
			border-radius: 30rpx;
			left: 3%;
			width: 88%;
			padding: 20rpx;
			padding-top: 35rpx;

			.abs-img {
				width: 220rpx;
				height: 220rpx;
				overflow: hidden;
				transform: rotate(-45deg);
				position: absolute;
				bottom: -55rpx;
				right: -55rpx;
			}

			.user-msg {
				padding-left: 30rpx;
				display: flex;
				align-items: center;

				.head-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					border: 4rpx solid #f8f8f8;
				}

				.msg-box {
					margin-left: 16rpx;

					.name-msg {
						padding-top: 10rpx;
						padding-bottom: 20rpx;
						font-size: 30rpx;
						color: #f8f8f8;
					}

					.lv-box {
						font-size: 24rpx;
						color: #F8F8F8;
						display: flex;
						align-items: center;

						text {
							padding: 0 10rpx;
							padding-top: 4rpx;
						}

						image {
							width: 25rpx;
							height: 25rpx;
						}
					}
				}
			}

			.num-box {
				margin-top: 40rpx;
				display: flex;
				align-items: center;

				.num-item {
					display: flex;
					align-items: flex-start;
					flex-direction: column;
					margin-left: 44rpx;

					text:first-child {
						color: #D5AF4A;

					}

					text:last-child {
						color: #F8F8F8;

					}
				}

				.num-item:first-child {
					margin-left: 30rpx;
				}
			}
		}

		.top-up-title {
			margin-top: 180rpx;
			padding: 0 23rpx;
			font-size: 32rpx;
			font-weight: bold;

		}

		.lv-list {
			display: flex;
			margin-top: 20rpx;
			padding: 0 23rpx;
			white-space: nowrap;

			.list-item {
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				width: 330rpx;
				border-radius: 15rpx;
				height: 210rpx;
				background-color: white;
				display: inline-block;
				border: 2rpx solid #E6E6E6;
				box-shadow: 0rpx 5rpx 20rpx rgba(#000000, .1);
				position: relative;

				view {
					text-align: center;
					margin-top: 10rpx;
				}

				.item-title {
					margin-top: 38rpx;
					font-size: 26rpx;
				}

				.item-money {
					text {
						padding-left: 4rpx;
						color: #E3C58C;
						font-size: 36rpx;
					}
				}

				.item-order {
					margin-top: 0rpx;
					color: #909399;
					font-size: 24rpx;
				}

				.abs-box {
					position: absolute;
					top: -6px;
					left: -2rpx;
					border-top-left-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
					width: 160rpx;
					color: #F8F8F8;
					font-size: 24rpx;
					background-image: linear-gradient(to right, #242A42, #474F64);
				}

				.box-color {
					background-image: linear-gradient(to right bottom, #727272, #D2D2D2);
				}
			}

			.active {
				background-color: #FAF3E3;
				border: 2rpx solid #E7C795;
			}
		}

		.pay-btn {
			background-image: linear-gradient(to right, #EDC498, #E8C38C);
			display: flex;
			margin: 0;
			margin: 0 23rpx;
			box-sizing: border-box;
			padding: 0 23rpx;
			margin-top: 30rpx;
			align-items: center;
			justify-content: center;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			text {
				padding-left: 6rpx;
				font-size: 30rpx;
			}
		}

		.level-floating {
			padding: 0 23rpx;

			.title {
				margin: 30rpx 0;
				text-align: center;
			}

			.level-detail {
				padding: 0 23rpx;
				padding-bottom: 120rpx;
			}

			.btn-group {
				position: fixed;
				bottom: 0;
				width: 100%;
				background-color: white;
				border-top: 2rpx solid #F8F8F8;
				display: flex;
				align-items: center;
				justify-content: space-around;

				button {
					margin: 0;
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					border-radius: 12rpx;
					width: 46%;
				}

				.sue-btn {
					background-color: #E9C38E;
					color: white;
					letter-spacing: 2rpx;

					text {
						padding-left: 8rpx;
					}
				}

				.quxiao-btn {
					background-color: #E6E6E6;
				}
			}
		}
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		background-image: linear-gradient(to bottom, #FAF3E3, #FFFFFF);
		width: 750upx;
		margin-top: 50rpx;
		height: 500upx;
		background-color: #FFFFFF;

		.echarts-title {
			padding: 0 23rpx;
			padding-top: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.echarts-footer {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 23rpx;
		padding-bottom: 50rpx;

		.see-btn {
			z-index: 99;
			background-color: #E8C38C;
			padding: 4rpx 24rpx;
			border-radius: 30rpx;
		}
	}

	.charts {
		width: 750upx;
		height: 500upx;
	}
	.agreement {
		display: flex;
		    
		justify-content: center;
		align-items: center;
		.wrap{width: 100%; display: flex;flex-direction: column;position: relative;box-sizing: border-box;padding:60rpx 0rpx 0rpx;overflow-y: hidden;
			.agreement-title-box{position: absolute;top: 0rpx;height: 60rpx;line-height: 60rpx;font-size: 32rpx;width: 100%; text-align: center;}
			.content{flex: 1;width: 100%;overflow-y: auto;margin-bottom: 20rpx;}
			.agreement-buttom-box{height: 80rpx;line-height: 80rpx;}
		}
	
		/deep/ .uni-popup__wrapper {
			width: 100%;
		}
		
	
		/deep/.uni-popup__wrapper-box {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: center;
			min-height: 800rpx;
			max-height: 800rpx;
			padding: 20rpx 20rpx;
		}
	
		.agreement-buttom-box {
			display: flex;
			button{
				width: 220rpx;
			}
		}
		.agreement-title-box{
			font-size: 35rpx;
			font-weight: 400;
		}
	
	}
	
	.agreement-box{
		width: 100%;
		
		.top-box{
			width: 100%;
			background-color: #D41B29;
			padding: 70rpx 0 30rpx;
			
			.text-box{
				display: flex;
				width: 100%;
				padding: 0 20%;
				box-sizing: border-box;
				justify-content: space-between;
				margin: 30rpx 0;
				
				text{
					color: #FFF;
					font-size: $ns-font-size-lg;
				}
			}
			
			.img-box{
				width: 100%;
				padding: 0 10%;
				box-sizing: border-box;
				
				image{
					width: 100%;
				}
			}
			.img-box-container{
				width: 100%;
				display: flex;
				justify-content: center;
				
				.img-2{
					background-color: #FFF;
					width: 80%;
					padding: 16rpx 0;
					border-radius: 8rpx;
					text-align: center;
					
					image{
						width: 70%;
					}
				}
			}
			
		}
		.footer-box{
			width: 100%;
			padding: 36rpx 5% 10px;
			box-sizing: border-box;
			
			.text-box{
				width: 100%;
				color: #646464;
				font-size: $ns-font-size-base;
				
				text{
					color: #4493CB;
				}
			}
			
			button{
				border: 1rpx solid #E4E5E5;
				border-radius: 6rpx !important;
				width: 100%;
				margin: 20rpx auto 0;
				height: 110rpx;
				line-height: 110rpx;
				font-size: $ns-font-size-lg;
				font-weight: bold;
			}
		}
	}
	
	.kf-contact{
		margin: 20rpx 0 20rpx 44rpx;
		font-size: $ns-font-size-sm;
		color: $ns-text-color-gray;
	}
	
</style>
<style scoped>
	/deep/ .uni-popup__wrapper.uni-bottom {
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		background-color: #f8f8f8;
	}

	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;

	}

	/deep/ .wallet_class .wallet_content {
		border-top: 2rpx solid #f8f8f8;
	}
	/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		border-radius: 6px;
		width: 85%;
	}

	/deep/ .uni-popup.agreement .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		padding: 0;

	}
</style>
